<template>
    <page-view>
        <div class="main flex justify-center items-center bg-backgroundColor">
            <div class="w-[1200px] h-[1000px]">
                <h1 class="text-[30px] text-red-500">购物车</h1>

                <el-table ref="multipleTableRef" :data="shopCartList" height="500px" width="1200px" style="width: 1200px"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="商品图片" width="120">
                        <template #default="scope">
                            <div class="demo-image__preview">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.good.pic" :zoom-rate="1.2"
                                    :preview-src-list="scope.row.good.srcList" :initial-index="4" fit="cover" />
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column property="commodityName" label="商品名" width="200" />
                    <el-table-column property="commodityPrice" label="单价" width="200" show-overflow-tooltip>
                        <template #default="scope">￥{{ scope.row.commodityPrice }}</template>
                    </el-table-column>
                    <el-table-column property="commodityNumber" label="数量" width="200">
                        <template #default="scope">
                            <el-input-number v-model="scope.row.commodityNumber" :min="1" :max="1000"
                                @change="(value) => handleChange(value, scope.row.id)" />
                        </template>
                    </el-table-column>
                    <el-table-column property="commoditySubtotal" label="总价" width="200">
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                        <template #default="scope">
                            <el-button type="danger" class="" @click="delteRow(scope.row.id)">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="flex">
                    <el-button type="primary" class="xxx mt-[20px]" @click="produceOrder">结算</el-button>
                    <el-button type="info" class="xxx mt-[20px]"
                        @click="$router.replace({ name: 'ProductInfo' })">再去挑选几件商品吧~</el-button>
                    <div class="mt-[16px] ml-[750px]  text-center flex items-center justify-center">
                        <p class="text-lg">总金额:
                            <span class="text-4xl text-red-600">{{ total }}</span>元
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </page-view>
</template>
<script setup>
import { result } from 'lodash';
import { ref, computed } from 'vue'
import API from '../../utils/API';
import { useRouter } from "vue-router";
import { ElNotification, ElMessage, ElLoading, ElMessageBox } from "element-plus";
const router = useRouter();
const shopCartList = ref([]);
const getUserAllShopcart = () => {
    API.Shopcart.getUserAllShopcart().then((response) => {
        shopCartList.value = response;
        console.log(shopCartList.value);
    })
}
//商品图片预览
getUserAllShopcart();
//总金额
const total = computed(() => {
    return shopCartList.value.reduce((accumulator, currentValue) => accumulator + currentValue.commoditySubtotal, 0);
});

const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(multipleSelection.value)
}
//生成

let shopCartVo = ref({
    val: 0,
    id: 0
});
//数字选择器
const handleChange = (value, id) => {
    console.log(value)
    shopCartVo.value.val = value
    shopCartVo.value.id = id
    API.Shopcart.updateNumberAndComputeMoney(shopCartVo.value).then(response => {
        getUserAllShopcart();
    })
}
let orderInfo = ref(null)
//结算生成订单
const produceOrder = () => {
    API.Shopcart.produceOrder(multipleSelection.value).then(response => {
        orderInfo.value = response;
        console.log(orderInfo.value, "orderInfo")
        const OrderInfoString = JSON.stringify(orderInfo);
        router.push({ name: "Order", query: { OrderInfoString } })
    })
}

let htmlPay = ref(null)
//调用后台支付接口
const payOrder = () => {
    API.Shopcart.payOrder(256342055113).then(result => {
        htmlPay.value = JSON.parse(result);
        console.log(htmlPay.value + "html")
    })
}
//移出购物车商品
const delteRow = (id) => {
    API.Shopcart.delteRow(id).then(result => {
        ElNotification({
            title: "提示",
            message: "移除商品成功!",
            type: "success"
        });
        getUserAllShopcart()
    })
}
</script>
<style scoped></style>